<div class="box">
    <div class="box-header">
        <h3 class="box-title">访问量统计</h3>
    </div>
    <div class="box-body">
        <div id="user_views" style="height:300px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var AppUserView = echarts.init(document.getElementById('user_views'));
            AppUserView.showLoading();
            fetch('/api/admin/home/user-views', {method: "POST"}).then(res => res.json())
                .then(data => {
                    if (!data.data) {
                        return;
                    }
                    AppUserView.hideLoading();
                    // 指定图表的配置项和数据
                    let option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        dataZoom: [{
                            startValue: data.start
                        }, {
                            type: 'inside'
                        }],
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.time
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },
                        series: [
                            {
                                name: '每日访问量',
                                type: 'line',
                                data: data.data,
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    AppUserView.setOption(option);
                });
        </script>
    </div>
</div>
